<template>
    <div class="home-top">
        <h3>穿戴专区</h3>
        <div class="content">
            <van-card
                v-for="item in goodsList"
                :key="item.id"
                :tag="item.tag"
                :price="item.retail_price"
                :origin-price="item.origin_price"
                :desc="item.goods_brief"
                :title="item.name"
                :thumb="item.list_pic_url"
            ></van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList = [
    {
        retail_price: '¥1538',
        origin_price: '¥1588',
        name: 'HUAWEI WATCH GT 5',
        goods_brief: '玄玑感知系统，全新跑骑体验，情绪健康助手',
        list_pic_url: 'src/assets/HomeTop/1.webp',
        tag: 'TOP1'
    },
    {
        retail_price: '¥3788',
        origin_price: '¥4688',
        name: 'HUAWEI WATCH GT 3 Pro',
        goods_brief: 'HUAWEI WATCH GT 3 Pro将现代科技融入经典的陶瓷工艺,使时尚设计透露更深邃的东方韵律，创作出别具一格的腕上新饰。',
        list_pic_url: 'src/assets/HomeTop/2.webp',
        tag: 'TOP2'
    },
    {
        retail_price: '¥229',
        origin_price: '¥269',
        name: '华为手环 9',
        goods_brief: '全天舒适佩戴，睡眠健康管理，心律失常提示',
        list_pic_url: 'src/assets/HomeTop/3.webp',
        tag: 'TOP3'
    },
    {
        retail_price: '¥2188',
        origin_price: '¥2988',
        name: 'HUAWEI WATCH D',
        goods_brief: '体温检测，血氧监测，血压测量，心电采集，含价值599元尊享服务权益',
        list_pic_url: 'src/assets/HomeTop/5.webp',
        tag: 'TOP4'
    },
    {
        retail_price: '¥1148',
        origin_price: '¥1198',
        name: '华为儿童手表 5 Pro ',
        goods_brief: '离线定位2.0，防沉迷守护，高清双摄',
        list_pic_url: 'src/assets/HomeTop/4.webp',
        tag: 'TOP5'
    }
];
</script>

<style lang="less" scoped>
.home-top {
    h3 {
        font-size: 24px;
        line-height: 1.2;
        text-align: center;
        margin: 1rem 0;
        color: #333; // 更深的文字颜色以增强对比度
    }

    .content {
        --van-tag-primary-color: #FF8C00; // 更鲜艳的标签颜色
        --van-card-font-size: 16px;
        --van-card-background: #fff; // 背景改为白色以提高可读性
        background: var(--van-card-background);

        :deep(.van-card) {
            border-radius: 10px; // 圆角边框，更柔和
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); // 添加阴影效果
            margin: 1rem;
            overflow: hidden;

            .van-card__header {
                padding: 1rem;
            }

            .van-card__title {
                font-weight: bold;
                color: #333;
            }

            .van-card__desc {
                color: #777;
            }

            .van-card__footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem;
                border-top: 1px solid #eee;
            }

            .van-card__price {
                color: #FF8C00; // 价格使用与标签相同的颜色
            }

            .van-card__origin-price {
                text-decoration: line-through;
                color: #999;
                margin-left: 0.5rem;
            }
        }

        &::after {
            content: '';
            display: block;
            height: 3rem;
        }
    }
}
</style>